<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query con-header">
        <FilterBar
          :showBack="false"
          @route="router.push({name:'ServiceList'})"
        >
          <template #left>
            <el-input
              v-model="query.svcName"
              placeholder="输入服务名称"
              class="input"
              @input="queryChange"
            >
            </el-input>
            <el-select
              v-model="query.appId"
              class="input"
              placeholder="请选择所属应用"
              clearable
              filterable
              @change="queryChange"
            >
              <el-option
                v-for="item in appList"
                :key="item.id"
                :label="item.appName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="reset"
              >重置</el-button>
          </template>
          <template #right>
            <!-- <el-button type="primary" plain @click="routerToView('ServiceList')"
              >返回</el-button
            > -->
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script lang="jsx">
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, reactive, onMounted, defineComponent } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import FilterBar from "@/components/FilterBar.vue";
import { useRouter } from "vue-router";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import {
  getUnauditedServieList,
  passAndReject,
} from "@/api/service";
import { getAppPageList } from "@/api/application.js";
import { getOrgTree } from "@/api/system";
export default defineComponent({
  name: "AdaptationDataSource",
  components: {
    Header,
    DynamicTable,
    FilterBar,
  },
  setup(props, { emit, slots }) {
    const query = reactive({});
    let {
      page,
      list,
      total,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      getList,
      queryChange,
      reset
    } = useListManage(props, emit, {
      getItems: getUnauditedServieList,
      query: query,
      getDetail: null,
      //   tableHeight: document.body.offsetHeight - 220
    });
    const router = useRouter();
    const routerToDetail = (pageName, id) => {
      router.push({
        name: pageName,
        query: { id },
      });
    };
    const appList = ref([]);
    const getAppList = async () => {
      let res = await getAppPageList({ current: 1, size: 999 });
      appList.value = res.data.list;
    };
    const routerToView = (pageName, versionId) => {
      if (versionId) {
        router.push({
          name: pageName,
          query: { versionId },
        });
      } else {
        router.push({
          name: pageName,
        });
      }
    };
    let showDetail = ref(false); // show model
    const props1 = {
      lazy: true,
      checkStrictly: true,
      async lazyLoad(node, resolve) {
        const { data } = node;
        const res = await getOrgTree({ parentId: data.value });
        const nodes = res.data.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        resolve(nodes);
      },
    };
    const options = ref([
      {
        value: "P",
        label: "待审核",
      },
      {
        value: "A",
        label: "已审核",
      },
      {
        value: "T",
        label: "草稿",
      },
    ]);

    const tableColumns = ref([
      { key: "svcName", label: "服务名称" },
      { key: "ifType", label: "接口类型" },
      { key: "appName", label: "所属应用" },
      { key: "memo", label: "说明" },
      { key: "versionNum", label: "版本号" },
      {
        label: "审核状态",
        render: (h, params) => <span>待审核</span>,
      },
      {
        label: "操作",
        fixed: "right",
        width: "200px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                disabled={params.row.auditSts == "A"}
                onClick={() => passAudit(params.row.versionId, "通过")}
              >
                通过
              </el-button>
            }
            {
              <el-button
                type="text"
                disabled={params.row.auditSts == "A"}
                onClick={() => passAudit(params.row.versionId, "驳回")}
              >
                驳回
              </el-button>
            }
            {
              <el-button
                type="text"
                onClick={() =>
                  routerToDetail("ServiceAuditDetail", params.row.svcId)
                }
              >
                详情
              </el-button>
            }
            {
              <el-button
                type="text"
                onClick={() =>
                  routerToView("AuditServiceInvocation", params.row.versionId)
                }
              >
                调用
              </el-button>
            }
          </span>
        ),
      },
    ]);
    const passAudit = (id, str) => {
      console.log(id);
      let typeUrl = str == "通过" ? "pass" : "reject";
      ElMessageBox.confirm(`请确认审核${str}？`, {
        confirmButtonText: str,
        cancelButtonText: "取消",
        type: "info",
      }).then(async () => {
        let res = await passAndReject(id, typeUrl);
        // console.log(res);
        let status = res.status == 200;
        ElMessage({
          type: status ? "success" : "error",
          message: status ? "操作成功" : "操作失败",
        });
        status ? getList() : false;
      });
    };
    let svcId = ref("");
    const detailInfo = ref({});
    const getDetailShow = async (id, versionId) => {
      svcId.value = id;
      // console.log(id, versionId);
      detailInfo.value = { id, versionId };
      showDetail.value = true;
    };
    onMounted(() => {
      getList();
      getAppList();
    });

    return {
      // 列表数据
      page,
      total,
      getList,
      showEdit,
      Search,
      list,
      listLoading,
      editType,
      query,
      queryChange,
      handleCreate,
      tableColumns,
      currentItem,
      showDetail,
      refresh,
      options,
      routerToView,
      // 操作方法
      passAudit,
      detailInfo,
      getDetailShow,
      props1,
      svcId,
      router,
      routerToDetail,
      reset,
      appList,
    };
  },
});
</script>
